<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span>请在下面输入您宝贵的建议</span>
      </div>
      <div style="width: 90%; margin-left: 5%">
       <el-input type="textarea" rows="8" v-model="advise"></el-input>
      </div>
      <div>
        <el-button style="margin-top: 20px;" size="medium" type="primary" @click="submitMessage">提交</el-button>
      </div>
    </el-card>
    <el-card class="table">
      <div class="ha">我的反馈记录</div>
      <div style="margin-left: 20px; overflow-y: auto; height: 345px">
        <div v-for="advise in adviseHistory" :key="advise.id"  class="one">
          <div>
            <el-row>
              <el-col :span="3">
                <div style="text-align: right; margin-top: 10px">反馈时间：</div>
              </el-col>
              <el-col :span="21">
                <div style="color: orchid; margin-top: 15px">{{advise.createTime}}</div>
              </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :span="3">
              <div style="text-align: right; margin-top: 13px">反馈内容：</div>
            </el-col>
            <el-col :span="21">
              <div style="color: orchid; text-align: left; margin-top: 13px">{{advise.context}}</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "system",
  data() {
    return {
      advise: '',
      adviseHistory: []
    }
  },
  created() {
    this.getHistory();
  },
  methods: {
    getHistory(){
      const token = JSON.parse(localStorage.getItem("loginMes")).token;
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.get("/system-notice/history", {
          headers: {
            token: token
          }
        }).then(res=>{
          if(res.data.code === '200'){
           this.adviseHistory = res.data.data;
          }else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    submitMessage(){
      const token = JSON.parse(localStorage.getItem("loginMes")).token;
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/system-notice/save", {
          context: this.advise
        }, {
          headers: {
            token: token
          }
        }).then(res=>{
          if(res.data.code === '200'){
            this.$message.success(res.data.data);
            this.getHistory();
          }else {
            this.$message.error(res.data.message);
          }
        })
      }
      this.advise = '';
    }
  }
}
</script>

<style scoped>
.one{
  box-shadow: 7px 7px 3px -4px rgba(190, 200, 210, 0.5);
  border-radius: 5px;
  border: #d9d9d9 solid 1px;
  margin-top: 15px;
  width: 90%;
}
.ha{
  font-size: 18px;
  color: orchid;
  font-weight: bolder;
  border-bottom: #EEE solid 2px;
}
.box-card{
  text-align: center;
  margin-top: 10px;
  width: 80%;
  margin-left: 10%;
  height: 320px;
}
.table{
  margin-top: 10px;
  width: 80%;
  margin-left: 10%;
  height: 300px;
  text-align: left;
}
</style>
